<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>新闻APP</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">

</head>
<body>
<div class="page">


    <!--<header class="bar bar-nav">-->
        <!--<h1 class='title'>标签页</h1>-->
    <!--</header>-->
    <div class="content infinite-scroll infinite-scroll-tab">
        <div class="buttons-tab fixed-tab">
            <a href="#tab1" class="tab-link active button">国内新闻</a>
            <a href="#tab2" class="tab-link button">国际新闻</a>
            <a href="#tab3" class="tab-link button">体育新闻</a>
        </div>
        <div class="content-block">
            <div class="tabs">
                <div id="tab1" class="tab active"  h-params="page=1" h-model="{list1:{type:'get',url:'http://api.huceo.com/guonei/?key=0e70bfd01018c4404e24e68c73255d81&num=10'}}">

                    <div class="list-block media-list">
                        <ul>
                            <li  h-each="article : {list1.newslist}" >
                                <div class="item-content">
                                    <div class="item-media"><a href="#"  class="external" h-href="{article.url}"> <img h-src="{article.picUrl}" src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width:145px;height:103px;'/></a></div>
                                    <div class="item-inner">
                                        <div class="item-title-row">
                                            <div class="item-title" ><a href="#"  h-text="{article.title}" class="external" h-href="{article.url}">国内新闻标题</a></div>
                                        </div>
                                        <div class="item-subtitle color-gray" h-text="{article.description} {article.ctime}">国内新闻子标题</div>
                                    </div>
                                </div>
                            </li>

                            <li h-remove="">
                                <div class="item-content">
                                    <div class="item-media"><a href="#"  class="external" > <img  src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width:145px;height:103px;'/></a></div>
                                    <div class="item-inner">
                                        <div class="item-title-row">
                                            <div class="item-title" ><a href="#"  class="external">国内新闻标题</a></div>
                                        </div>
                                        <div class="item-subtitle color-gray">国内新闻子标题</div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>

                </div>
                <div id="tab2" class="tab "  h-params="{page:1}"  h-model="{list2:{type:'get',url:'http://api.huceo.com/world/?key=0e70bfd01018c4404e24e68c73255d81&num=10'}}">

                    <div class="list-block media-list">
                        <ul>
                            <li  h-each="article : {list2.newslist}">
                                <div class="item-content">
                                    <div class="item-media"><a href="#"   h-href="{article.url}"> <img h-src="{article.picUrl}" src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width:145px;height:103px;'/></a></div>
                                    <div class="item-inner">
                                        <div class="item-title-row">
                                            <div class="item-title"><a href="#"  h-text="{article.title}" class="external" h-href="{article.url}">国际新闻标题</a></div>
                                        </div>
                                        <div class="item-subtitle color-gray" h-text="{article.description} {article.ctime}">国际新闻子标题</div>
                                    </div>
                                </div>
                            </li>

                            <li h-remove="">
                                <div class="item-content">
                                    <div class="item-media"><a href="#"  class="external" > <img  src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width:145px;height:103px;'/></a></div>
                                    <div class="item-inner">
                                        <div class="item-title-row">
                                            <div class="item-title" ><a href="#"  class="external">国际新闻标题</a></div>
                                        </div>
                                        <div class="item-subtitle color-gray">国际新闻子标题</div>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </div>

                </div>
                <div id="tab3" class="tab "   h-params="page=1"  h-model="{list3:{type:'get',url:'http://api.huceo.com/tiyu/?key=0e70bfd01018c4404e24e68c73255d81&num=10'}}">

                    <div class="list-block media-list">
                        <ul>
                            <li   h-each="article : {list3.newslist}">
                                <div class="item-content">
                                    <div class="item-media"><a href="#"  h-href="{article.url}" class="external"> <img h-src="{article.picUrl}" src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width:145px;height:103px;'/></a></div>
                                    <div class="item-inner">
                                        <div class="item-title-row">
                                            <div class="item-title"><a href="#"  h-text="{article.title}" class="external" h-href="{article.url}">体育新闻标题</a></div>
                                        </div>
                                        <div class="item-subtitle color-gray" h-text="{article.description} {article.ctime}">体育新闻子标题</div>
                                    </div>
                                </div>
                            </li>

                            <li h-remove="">
                                <div class="item-content">
                                    <div class="item-media"><a href="#"  class="external" > <img  src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width:145px;height:103px;'/></a></div>
                                    <div class="item-inner">
                                        <div class="item-title-row">
                                            <div class="item-title" ><a href="#"  class="external">体育新闻标题</a></div>
                                        </div>
                                        <div class="item-subtitle color-gray">体育新闻子标题</div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>


        <!-- 加载提示符 -->
        <div class="infinite-scroll-preloader">
            <div class="preloader"></div>
        </div>
    </div>


</div>
<!--<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>-->

<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<!--<script type='text/javascript' src='http://light7.org/dist/js/light7.min.js' charset='utf-8'></script>-->
<!--<script type='text/javascript' src='http://light7.org/dist/js/light7-swiper.min.js' charset='utf-8'></script>-->
<script type='text/javascript' src="../domTemplate.js"></script>

<!--<script src="http://7xox8u.com1.z0.glb.clouddn.com/tp/dt-sui-mobile.js"></script>-->
<!--<script src="http://7xox8u.com1.z0.glb.clouddn.com/tp/ht.domTemplate.js"></script>-->

<script type="text/javascript">
    $(function () {

        var loading = false;
        var modelPage = {};
        // 注册'infinite'事件处理函数
        $(document).on('infinite', '.infinite-scroll-tab', function () {

            // 如果正在加载，则退出
            if (loading) return;

            // 设置flag
            loading = true;
            var $item = $('.infinite-scroll-tab').find('.tabs .active')
            var models = $.domTemplate.getModelsBySelector($item);
            for (var i = 0; i < models.length; i++) {
                var model = models[i];
                var page = modelPage[model.name] || 1;
                page++;
                modelPage[model.name] = page;
                models[i].setParamsData({page: page}).reload({appendType: 'after'}, function () {
                    console.info("加载完成")
                    // 设置flag
                    loading = false;
                });
            }
        });

        $.init();

        $.domTemplate.init();
    });

</script>

</body>
</html>
